<template>
  <div className="statistic-box">
    <div className="item">
      <div className="item-top">销量</div>
      <div className="item-bottom">{{ data.user_count }}</div>
    </div>
    <div className="item" style="color: rgb(140,120,83)">
      <div className="item-top">销量</div>
      <div className="item-bottom" style="border-color: rgb(140,120,83)">{{ data.xxx }}</div>
    </div>
    <div className="item" style="color: rgb(135,31,120)">
      <div className="item-top">销量</div>
      <div className="item-bottom" style="border-color: rgb(135,31,120)">{{ data.xxx }}</div>
    </div>
    <div className="item" style="color: rgb(0,0,156)">
      <div className="item-top">销量</div>
      <div className="item-bottom" style="border-color: rgb(0,0,156)">{{ data.xxx }}</div>
    </div>
    <div className="item" style="color: rgb(6,181,183)">
      <div className="item-top">销量</div>
      <div className="item-bottom" style="border-color: rgb(6,181,183)">{{ data.xxx }}</div>
    </div>
  </div>

  <div className="echart-box">
    <div style="text-align: center;font-size: 18px">注册人数</div>
    <div id="main" style="height:400px;"></div>
  </div>

</template>
<script setup>
import {ref, nextTick} from "vue";
import { ElMessage,ElMessageBox } from 'element-plus'
import * as echarts from 'echarts';
import func from '@/common/func'

const data = ref({})
let listUrl = '/ajax/getStatisticData'

loadData()

function loadData() {
  /*let pdt = {}
  func.request(listUrl, pdt).then(res => {
    if (res.code === 1) {
      data.value = res.data.statistic;
      nextTick(() => {
        let myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(res.data.option);
      })
    }
  });*/
}
</script>

<style lang="scss" scoped>
.el-col {
  text-align: center;
}

.statistic-box {
  margin: 0 auto;
  display: flex;
  max-width: 1200px;
  background: rgb(238, 238, 238);
  padding: 20px;
  border-radius: 10px;
  justify-content: space-between;

  .item {
    flex: 1;
    overflow: hidden;
    color: rgb(34, 97, 201);

    .item-top {
      font-size: 20px;
      height: 20px;
      line-height: 20px;
      font-weight: bold;
      text-align: center;
    }

    .item-bottom {
      margin: 20px auto 0;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 10px solid rgb(34, 97, 201);
      text-align: center;
      line-height: 80px;
      font-size: 12px;
      font-weight: bold;
    }
  }
}

.echart-box {
  margin: 20px auto 0;
  max-width: 1200px;
  background: rgb(238, 238, 238);
  padding: 20px;
  border-radius: 10px;
}
</style>
